import React from 'react';
import { WeaFormItem, WeaSelect, WeaInput, WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

class ETabWidth extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabwidth: this.props.tabwidth || '76',
            methodvalue: this.props.methodvalue || '2',
            isDefaultWidth: true,
        }
    }

    getSaveValues() {
        const { tabwidth, methodvalue } = this.state;
        let data = {};
        if(methodvalue == '2'){
            data = {
                tabwidth: '76',
                methodvalue: '2'
            };
        }else data = {tabwidth,methodvalue };
        return data;
    }

    componentWillReceiveProps(nextProps) {
        this.state.isDefaultWidth && this.setState({tabwidth: nextProps.tabwidth});
    }

    render(){
        const { tabwidth, methodvalue } = this.state;
        const { disabled } = this.props;
        const options = [
            {
                key: "1",
                showname: getLabel(501539,'固定宽度')
            },
            {
                key: "2",
                selected: true,
                showname: getLabel(128975,'自适应') ,
            }
        ];
        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@i7a82x`} label={getLabel(501540,'tab页宽度') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <div style={{width : '90px', display: 'inline-block', float: 'left'}}>
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@7g11bn`}
                        options={options}
                        value={methodvalue}
                        onChange={v => {
                            this.setState({methodvalue : v});
                        }}
                        disabled={disabled}
                    />
                </div>
                {
                    methodvalue == '1' &&
                    <div style={{display: 'inline-block'}}>
                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@el8zew`}
                            value={tabwidth}
                            disabled={disabled}
                            style={{width: '54px', marginLeft: '15px'}}
                            onChange={v=> {this.setState({tabwidth : v, isDefaultWidth: false})}}/>
                        <div style={{display: 'inline-block', marginBottom: '6px', marginLeft: '15px'}}>px</div>
                    </div>
                }
            </WeaFormItem>
        )
    }
}


export default ETabWidth;